<template>
  <div>
    <div class="nav">
      <van-icon
        name="wap-nav"
        size="25"
        style="float: left; padding-top: 1rem; padding-left: 1rem"
        @click="nav"
      />

      <van-popup
        v-model="navShow"
        position="left"
        :style="{ height: '100%', width: '40%', margin: '3.75rem 0 0 0' }"
      >
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="首页" @click="goHome" />
          <van-sidebar-item title="购物车" @click="goCard" />
          <van-sidebar-item title="订单" @click="goOrder" />
          <van-sidebar-item title="搜索" @click="goSearch" />
          <!-- <van-sidebar-item title="聊天" @click="goWebSocket" />
          <van-sidebar-item title="个人博客" @click="goMyBoKe" /> -->
        </van-sidebar>

      </van-popup>





      <div
        style="float: right; margin-top: 0.6rem; margin-right: 0.6rem"
        @click="showUserInfo"
      >
        <van-image
          round
          width="2.5rem"
          src="https://shop1104.oss-cn-shanghai.aliyuncs.com/shop/photo-demo.png"
        />
      </div>
      <!-- 登录显示邮箱 -->
      <div
        style="
          width: 65%;
          float: right;
          line-height: 3.75rem;
          text-align: right;
          font-size: 0.9rem;
        "
      >
        {{ this.memberEmail.buyerEmail }}
      </div>
      <!-- 用户头像弹框 -->
      <van-popup
        v-model="userShow"
        position="right"
        class="userPhotoPopup"
        :style="{ height: '100%', width: '40%', margin: '3.75rem 0 0 0rem' }"
      >
        <div
          style="
            font-weight: 600;
            line-height: 4rem;
            font-size: 0.9rem;
            padding-left: 0.3rem;
            background: #999;
          "
          @click="onLogin"
        >
          {{ photoPopupInfo }}
        </div>
      </van-popup>
    </div>
    <!-- <div id="m-nav"   :class="navIsShow">

</div> -->

  </div>
</template>
<script>
export default {
  name: "Nav",
  props: ["message"],
  data() {
    return {
      // navIsShow:'m-yincang',
      navShow: false,
      activeKey: this.message,
      userShow: false,
      photoPopupInfo: "登录",
      memberEmail: "",
    };
  },
  created() {
    const _this = this;
    axios.get(this.$api + "member/getMemberInfo").then(function (resp) {
      if (resp.data.code == 0) {
        _this.memberEmail = resp.data.data;
        _this.photoPopupInfo = "退出";
      }
    });
  },
  methods: {
    goMyBoKe() {
      if (this.$route.path != "/boke") {
        this.$router.push("/boke");
      }
    },
    goWebSocket() {
      if (this.$route.path != "/socket") {
        this.$router.push("/socket");
      }
    },
    nav() {
      this.navShow = true;
      // this.navIsShow=''
    },
    goHome() {
      if (this.$route.path != "/") {
        this.$router.push("/");
      }
    },
    goCard() {
      if (this.$route.path != "/card") {
        this.$router.push("/card");
      }
    },
    goOrder() {
      if (this.$route.path != "/order") {
        this.$router.push("/order");
      }
    },
    goSearch() {
      if (this.$route.path != "/search") {
        this.$router.push("/search");
      }
    },
    showUserInfo() {
      this.userShow = true;
    },
    onLogin() {
      if (this.$route.path != "/login" && this.photoPopupInfo == "登录") {
        this.$router.push("/login");
      }
      if (this.photoPopupInfo == "退出") {
        this.$cookie.remove("shoptoken", {
          domain: "utools.club",
        });
        this.$cookie.remove("shoptoken", {
          domain: "localhost",
        });
        this.$cookie.remove("shoptoken", {
          domain: ".mobilestore.link",
        });
                this.$cookie.remove("shoptoken", {
          domain: ".liuzhuangzhuang1993.cn",
        });
        this.$cookie.remove("shoptoken", {
          domain: "39.107.249.74",
        });
        if (this.$route.path != "/") {
          this.$router.push("/");
        } else {
          this.$router.go(0);
        }
      }
    },
  },
};
</script>
<style scoped>
#m-nav{
  height: 92.6%;
  width:10rem;
  background-color: goldenrod;
  position: absolute;
  /* top:3.75rem */
  /* padding-top:3.75rem; */
}
/* .m-yincang{
  display: none;
} */
/* nav */
.van-sidebar-item--select {
  background: rgb(201, 255, 119);
}
/* nav */
.van-sidebar-item::before {
  background: rgb(255, 154, 205);
  height: 100%;
  width: 10px;
}
/* nav */
.van-sidebar {
  width: 100%;
}
.nav {
  background: rosybrown;
  width: 100%;
  height: 60px;
  /* max-width: 30rem; */
  /* margin-left: 10rem; */
}
/* .userPhotoPopup{
  height: 3rem;
  width: 30%;
  margin: 4rem 0 0 16.2rem;

} */
/* :style="{ height: '3rem', width: '30%', margin: '4rem 0 0 16.2rem' }" */
</style>